<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .top-nav{
        width: 960px;
        margin: 60px auto;
        border: 1px solid #222;
        background: #111;
        background-image: linear-gradient(#444,#111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777;
        padding: 0;
        list-style: none;
    }
    .top-nav:before,.top-nav:after{
        content: " ";
        display: table;
    }
    .top-nav:after{
        clear: both;
    }
    .top-nav{zoom:1;}
    .top-nav li{
        float: left;
        border-right: 1px solid #222;
        box-shadow: 1px 0 0 #444;
        position: relative;
        /*background-color: red;*/
    }
    .top-nav li a{
        float: left;
        padding: 12px 30px;
        color: #999;
        font-weight: bold;
        font-size: 12px;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
    .top-nav li a:hover{
        color: #fafafa;
    }
    .top-nav li ul{
        visibility: hidden;
        position: absolute;
        list-style: none;
        top: 38px;
        left: 0px;
        padding: 0;
        z-index: 1;
        background: yellow;
        background-image: linear-gradient(yellow,#111);
        box-shadow: 0 -1 0 rgba(255,255,255,3);
        border-radius: 3px;
        opacity: 0;
        margin: 20px 0 0 0;
        _margin:0;
        transition: all .2s ease-in-out;
    }
    .top-nav li:hover > ul{
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
    .top-nav ul li{
        float: none;;
        display: block;
        border: 0;
        box-shadow: 0 1px 0 #111,0 2px 0 #666;
    }
    .top-nav ul a{
        padding: 10px;
        width: 130px;
        display: block;
        float: none;
        _heigth:10px;
    }
    .top-nav ul a:hover{
        background-color: #0186ba;
        background-image: linear-gradient(#04acec,#0186ba);
    }
    .top-nav ul li:first-child > a{
        border-radius: 3px 3px 0 0;
    }
    .top-nav ul li:last-child > a{
        border-radius: 0 0 3px 3px ;
    }
    .top-nav ul li:first-child >a:before{
        content: " ";
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
    }
    .top-nav ul li:first-child > a:hover:before{
        border-bottom-color: #04acec;
    }
    .top-nav ul ul{
        top:0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin:0;
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
    }
    .top-nav ul ul li:first-child  a:before{
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom:6px solid transparent; 
        border-top:6px solid transparent; 
        border-right:6px solid #3b3b3b; 
    }
    .top-nav ul ul li:first-child a:hover:before{
        border-right-color: #0299d3;
        border-bottom-color: transparent;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            if($.browser.msie && $.browser.version.substr(0,1)<7){
                $('li').has('ul').mouseover(function(){
                    $(this).children('ul').css('visibility','visible');
                }).mouseout(function(){
                    $(this).children('ul').css('visibility','hidden');
                })
            }
         });
        </script>
</head>
<body>
    <ul class="top-nav">
    <li><a href=""><span class="note">网站首页</span> </a></li>
    <li><a href="">课程大厅</a></li>
    <li><a href="">学习中心+</a>
    <ul id="mnuUL">
       
        <li><a href="">前端课程+</a>
            <ul>
                <li><a href="">javascript</a></li>
                <li><a href="">css</a></li>
                <li><a href="">jquery</a></li>
            </ul>
        </li>
        <li><a href="">后端编程</a></li>
        <li><a href="">手机开发+</a>
            <ul>
                <li><a href="">IOS</a></li>
                <li><a href="">安卓</a></li>
            </ul>
        </li>
    </ul>
    </li>
    <li><a href="">经典案例</a></li>
</ul>
</body>
</html>